<template>
    <view class="page-city-list">
        <u-index-list :scrollTop="listData.scrollTop" v-if="listData.list.length > 0" :index-list="listData.letters">
            <view v-for="(item, index) in listData.list" :key="index">
                <u-index-anchor :index="item.name" />
                <u-cell-group>
                    <u-cell-item v-for="(city,j) in item.value" :key=index :title="city.name" :arrow="false" @click="setCurrentCity(city)"/>
                </u-cell-group>
            </view>
        </u-index-list>
    </view>
</template>
<script setup lang="ts">
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
import {pinyin} from "@/static/js/pinyin";
import { useAppStore } from "@/stores/app";
let appStore = useAppStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import { onShow, onPageScroll } from '@dcloudio/uni-app';
const listData = reactive({
    scrollTop: 0,
    letters: [],
    list: [
        // {name: 'A', value:[{id:1, name: '啊的'}, {id:2, name: '啊啊啊'}]},
        // {name: 'B', value:[{id:1, name: 'bbb'}, {id:2, name: '把啊啊'}]},
    ]
});
const getList = () => {
    // proxy.$http('get', '/admin/sysArea/page', {areaType:2, size:1000}, (data,msg) => {
        let arr = [];
        citys.forEach(item => {
            arr = arr.concat(item);
        });
        // let arr = data.records.filter(item => item.level == 'city');        
        let list = arr.map(item => {
            item.letter = pinyin.getFirstCamelChars(item.name);
            return item;
        });
        let letters = list.map(item => item.letter);
        let uniqueLetters = [...new Set(letters)];
        uniqueLetters.sort();
        listData.letters = uniqueLetters;
        let res = uniqueLetters.map(item => {
            let obj = { 
                name: item,
                value: []
            };
            obj.value = list.filter(sub => sub.letter == item);
            return obj;
        });
        listData.list = res;
    // })
};
const setCurrentCity = (item) => {
    appStore.currentCity = item;
    uni.navigateBack(-1)
}
onPageScroll((e) => {
	listData.scrollTop = e.scrollTop;
});
onShow(() => {
    // console.log(citys);
    getList();
})
</script>